<template>
	<el-form label-width="80px" :model="form" :rules="rules" ref="queryForm" @submit.prevent>

		<el-row>
			<el-col :span="12">

				<el-form-item label="行政区域" prop="district">
					<el-select v-model="form.district" size="default" placeholder="请选择" style="width: 200px" clearable
						filterable>
						<el-option v-for="item in options" :key="item.dictValue" :label="item.dictLabel"
							:value="item.dictValue" />
					</el-select>
				</el-form-item>

				<el-form-item label="序号" prop="code">
					<el-input v-model="form.code" style="width:200px;"
						@input="e => regOnlyNumSpot(e, form, 'code', 0)"></el-input>
				</el-form-item>

				<el-form-item label="编制类型" prop="type">
					<el-select v-model="form.type" size="default" placeholder="请选择" style="width: 200px" clearable
						filterable @change="handleChage">
						<el-option label="平时编制" value="平时编制" />
						<el-option label="战时编制" value="战时编制" />
					</el-select>
				</el-form-item>


				<el-form-item label="大类型" prop="typeB">
					<el-select v-model="form.typeB" size="default" placeholder="请选择" style="width: 200px" clearable
						filterable>
						<el-option v-for="item in optionsA" :key="item.dictValue" :label="item.dictLabel"
							:value="item.dictValue" />
					</el-select>
				</el-form-item>


				<el-form-item label="小类型" prop="typeX">
					<el-select v-model="form.typeX" size="default" placeholder="请选择" style="width: 200px" clearable
						filterable>
						<el-option v-for="item in optionsB" :key="item.dictValue" :label="item.dictLabel"
							:value="item.dictValue" />
					</el-select>
				</el-form-item>

				<el-form-item label="编建单位" prop="unit">
					<el-input v-model="form.unit" style="width:200px;"></el-input>
				</el-form-item>

				<el-form-item label="牵头单位" prop="qtdw">
					<el-input v-model="form.qtdw" style="width:200px;"></el-input>
				</el-form-item>

				<el-form-item label="扩编比例" prop="kbbl" v-if="isShow">
					<el-input v-model="form.kbbl" style="width:200px;"
						@input="e => regOnlyNumSpot(e, form, 'kbbl', 0)"></el-input>
				</el-form-item>

			</el-col>

			<el-col :span="12">

				<el-form-item label="团" prop="tuan">
					<el-input v-model="form.tuan" style="width:200px;"
						@input="e => regOnlyNumSpot(e, form, 'tuan', 0)"></el-input>
				</el-form-item>


				<el-form-item label="营" prop="ying">
					<el-input v-model="form.ying" style="width:200px;"
						@input="e => regOnlyNumSpot(e, form, 'ying', 0)"></el-input>
				</el-form-item>

				<el-form-item label="连" prop="lian">
					<el-input v-model="form.lian" style="width:200px;"
						@input="e => regOnlyNumSpot(e, form, 'lian', 0)"></el-input>
				</el-form-item>

				<el-form-item label="排" prop="pai">
					<el-input v-model="form.pai" style="width:200px;"
						@input="e => regOnlyNumSpot(e, form, 'pai', 0)"></el-input>
				</el-form-item>

				<el-form-item label="班" prop="ban">
					<el-input v-model="form.ban" style="width:200px;"
						@input="e => regOnlyNumSpot(e, form, 'ban', 0)"></el-input>
				</el-form-item>

				<el-form-item label="员额" prop="num">
					<el-input v-model="form.num" style="width:200px;"
						@input="e => regOnlyNumSpot(e, form, 'num', 0)"></el-input>
				</el-form-item>

				<el-form-item label="扩编人数" prop="kbrs" v-if="isShow">
					<el-input v-model="form.kbrs" style="width:200px;"
						@input="e => regOnlyNumSpot(e, form, 'kbrs', 0)"></el-input>
				</el-form-item>

			</el-col>
		</el-row>


		<div style="display: flex;justify-content: flex-end;">
			<el-button @click="closethis()" @keyup.prevent @keydown.enter.prevent>取消</el-button>
			<el-button type="primary" @click="submit(queryForm)" @keyup.prevent @keydown.enter.prevent>确定</el-button>
		</div>

	</el-form>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		ElMessage
	} from 'element-plus'

	import {
		commonInterface
	} from '@/api/common/common'

	import {
		regOnlyNumSpot
	} from '@/utils/reg'

	import {
		commonZydTypeA,
		commonZydTypeB
	} from '@/api/common/common'



	const emit = defineEmits(['getList', 'closeWindow'])
	const props = defineProps(['editData', 'options'])

	const form = ref({
		name: '',
		type: '战时编制'
	})

	const queryForm = ref('')

	const options = ref([])

	const optionsA = ref()
	const optionsB = ref()

	const isShow = ref(true)

	//必填项
	const rules = reactive({
		name: [{
			required: true,
			message: "此选项不能为空!",
			trigger: "blur"
		}]

	})
	//取消
	const closethis = () => {
		emit('closeWindow')
	}

	//确定
	const submit = async (e) => {
		if (!e) return
		await e.validate((valid) => {
			if (valid) {
				let method = 'post'
				if (props.editData) method = 'put'
				commonInterface('/back/renfang/zhyd/zydb/', form.value, method).then(result => {
					if (result.code === 200) {
						ElMessage.success(result.msg)
						emit('closeWindow')
						emit('getList')
					} else {
						ElMessage.error(result.msg)
					}
				})
			}
		})
	}

	const getTypeA = () => {
		commonZydTypeA().then(result => {
			if (result.code === 200) optionsA.value = result.data
		})
	}
	const getTypeB = () => {
		commonZydTypeB().then(result => {
			if (result.code === 200) optionsB.value = result.data
		})
	}


	const handleChage = (e) => {
		if (e === '平时编制') {
			isShow.value = false
		} else {
			isShow.value = true
		}
	}

	onMounted(() => {
		getTypeA()
		getTypeB()
		options.value = props.options
		if (props.editData) form.value = props.editData
		
		if(props.editData && props.editData.type == "战时编制"){
			isShow.value = true
		} else {
			isShow.value = false
		}
		
	})
</script>

<style lang="scss" scoped>
</style>